<template>
  <div class="box">
    <!-- 头部搜索模块 -->
    <headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :goSearchFc="searchClickStorehouse" :addFun="add" />
    <!-- 中间表格模块 -->
    <BaseTable :data="storeHouseTableData" :columns="storeHouseDataColumns" :tableHeight="tableHeight" :pagination="false"
      :loading="loading"></BaseTable>

    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
    </div>
    <!-- 新增/修改库场 -->
    <el-drawer :before-close="handleClose" :title="title" :visible.sync="addleixingMod" direction="rtl">
      <el-form :rules="Rules" ref="formRefs" size="small" :model="form" style="padding:10px 20px">
        <el-form-item label="库场名称" prop="storehouseName" :label-width="formLabelWidth">
          <el-input v-model="form.storehouseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库场面积" prop="storehouseArea" :label-width="formLabelWidth">
          <el-input @input="form.storehouseArea = verifyfilter('charSpace', form.storehouseArea)"
            v-model="form.storehouseArea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="场地类型" prop="storageType" :label-width="formLabelWidth">
          <el-select clearable v-model="form.storageType" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in storageTypeList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属堆场" prop="yardId" :label-width="formLabelWidth">
          <el-select clearable v-model="form.yardId" placeholder="选择堆场" style="width: 100%" @change="yardChange">
            <el-option v-for="item in yardDataList" :key="item.yardId" :label="item.yardName"
              :value="item.yardId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属区域" prop="regionCode" :label-width="formLabelWidth">
          <el-select clearable v-model="form.regionCode" placeholder="港内堆场" style="width: 100%" @change="regionChange">
            <el-option v-for="item in regionList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场地性质" prop="storageNature" :label-width="formLabelWidth">
          <el-select clearable v-model="form.storageNature" placeholder="选择场地性质" style="width: 100%">
            <el-option v-for="item in storageNatureList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="sortNum" :label-width="formLabelWidth">
          <el-input @input="form.sortNum = verifyfilter('latinSpace', form.sortNum)" v-model="form.sortNum"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off" type="textarea" maxlength="500" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="addList()">保 存</el-button>
      </div>
    </el-drawer>
    <!-- 列表 -->
    <el-drawer :before-close="handleClose1" title="货位列表" :visible.sync="exlc" direction="rtl" size="50%">
      <el-form ref="addSearch" size="mini" :model="ParamformList" inline style="padding:10px 20px">
        <el-form-item label>
          <el-input placeholder="货位编号" clearable v-model="ParamformList.locationNo" style="width:150px"
            @keyup.enter.native="searchClickHw"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClickHw()" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item style="float:right;">
          <div>
            <el-button icon="el-icon-plus" v-hasPermi="['basicDataSubsystem:storehouse:inserthuo']"
              @click="locationAddModel" size="mini"></el-button>
          </div>
        </el-form-item>
      </el-form>
      <BaseTable :data="storehouseLocation" :columns="storehouseLocationColumns" :tableHeight="tableHeight + 50"
        :pagination="false" :loading="loading"></BaseTable>
      <div class="page">
        <el-pagination background @size-change="handleSizeCha" @current-change="handleCurrentCha"
          :current-page="startpage1" :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagesize1"
          layout="total, sizes, prev, pager, next, jumper" :total="totalNum1"></el-pagination>
      </div>
    </el-drawer>
    <!-- 新增/修改货位列表 -->
    <el-drawer :before-close="handleClose2" :title="locationtitle" :visible.sync="showLocation" direction="rtl">
      <el-form ref="addHuo" :rules="locationRules" status-icon size="small" :model="locationForm"
        style="padding:10px 20px">
        <el-form-item prop="locationNo" label="货位编号" :label-width="formLabelWidth">
          <el-input v-model="locationForm.locationNo" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item prop="sortNum" label="排序号" :label-width="formLabelWidth">
          <el-input @input="locationForm.sortNum = verifyfilter('number', locationForm.sortNum)" type
            v-model="locationForm.sortNum" autocomplete="off" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="postList" :loading="locationLoading">{{
          locationLoading ? '提交中...' : '保 存' }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import BaseForm from '@/pages/SystemPage/system/component/form.vue'
import headerSearch from './component/headerSearch'
import publicapi from '@/api/public/index.js'
export default {
  name: 'deviceTypeInformation',
  components: {
    BaseForm,
    BaseTable,
    headerSearch
  },
  data() {
    return {
      oldValA: {},
      oldValB: {},
      oldValC: {},
      oldValD: {},
      selectObject: [{
        name: '库场名称',
        type: 'input',
        modelName: 'storehouseName'
      },
      {
        name: '所属堆场',
        type: 'select',
        modelName: 'yardId',
        selectData: this.yardDataListData
      }],
      menuFlag: false,
      exlc: false,
      // 库场列表数据
      storeHouseDataColumns: [
        {
          prop: 'storehouseName',
          label: '库场名称'
        },
        {
          prop: 'storehouseArea',
          label: '库场面积'
        },
        {
          prop: 'storageType',
          label: '场地类型',
          render(h, params) {
            let text = ''
            if (params.row.storageType) {
              text = params.row.storageType == '1' ? '场' : params.row.storageType == '2' ? '库' : params.row.storageType == '3' ? '车间' : '熏蒸库'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'yardName',
          label: '所属堆场'
        },
        {
          prop: 'regionName',
          label: '所属区域'
        },
        {
          prop: 'storageNature',
          label: '场地性质',
          render(h, params) {
            let text = ''
            if (params.row.storageNature) {
              text = params.row.storageNature == 1 ? '硬化场地' : '非硬化场地'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'sortNum',
          label: '排序号'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 300,
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini',
                    disabled: params.row.delFlag == '1',
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params.$index, params.row)
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    innerHTML: `<span style='color:#9420A8;'><i class='iconfont icon-1-09'></i><span  style='padding-left:5px;'>列表</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleList(params.$index, params.row)
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete('1', params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      storeHouseTableData: [],
      // 货位列表数据
      storehouseLocationColumns: [
        {
          prop: 'locationNo',
          label: '货位编号'
        },
        {
          prop: 'sortNum',
          label: '排序号'
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 300,
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini',
                    disabled: params.row.delFlag == '1'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span style='color:#0B6CD6;' v-hasPermi="['basicDataSubsystem:storehouse:updatehuo1']"><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.locationUpdateModel(params.$index, params.row)
                    }
                  }
                }),

                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    innerHTML: `<span style='color:#F75E5E;' v-hasPermi="['basicDataSubsystem:storehouse:deleteByIdhuo']"><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete('2', params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      // 货位
      storehouseLocation: [],
      loading: false,
      menuArr: [],
      statusFlag: false,
      // 查询
      paramform: {
        storehouseName: '',
        yardId:''
      },
      // 查询货名
      ParamformList: {
        locationNo: ''
      },
      // 堆场信息
      form: {
        storehouseName: '',
        storehouseArea: '',
        storageType: '',
        yardId: '',
        yardName: '',
        regionCode: '',
        regionName: '',
        storageNature: '',
        sortNum: '',
        delFlag: '0',
        remark: ''
      },
      // 区域
      regionList: [],
      // 堆场
      yardDataList: [],
      yardDataListData: [],
      storageTypeList: [
        {
          value: 1,
          label: '场'
        }, {
          value: 2,
          label: '库'
        }, {
          value: 3,
          label: '车间'
        }, {
          value: 4,
          label: '熏蒸库'
        }
      ],
      // 场地性质
      storageNatureList: [
        {
          value: 1,
          label: '硬化场地'
        }, {
          value: 2,
          label: '非硬化场地'
        }
      ],
      startpage: 1,
      startpage1: 1,
      formLabelWidth: '120px', // form的item宽度
      editleixMod: false, // 修改弹出字典标签框
      addleixingMod: false, // 新增字典标签框
      nowData: {}, // 临时存放操作数据
      Rules: {
        storehouseName: [
          {
            required: true,
            message: '请输入库场名称',
            trigger: 'blur'
          }
        ],
        storehouseArea: [
          {
            required: true,
            message: '请输入库场面积',
            trigger: 'blur'
          }
        ],
        storageType: [
          {
            required: true,
            message: '请选择场地类型',
            trigger: 'blur'
          }
        ],
        yardId: [
          {
            required: true,
            message: '请选择所属堆场',
            trigger: 'blur'
          }
        ],
        regionCode: [
          {
            required: true,
            message: '请选择所属区域',
            trigger: 'blur'
          }
        ],
        storageNature: [
          {
            required: true,
            message: '请选择场地性质',
            trigger: 'blur'
          }
        ],
        sortNum: [
          {
            required: true,
            message: '请输入排序号',
            trigger: 'blur'
          }
        ]
      },
      // 货位验证
      locationRules: {
        locationNo: [
          {
            required: true,
            message: '请输入货位编号',
            trigger: 'blur'
          }
        ],
        sortNum: [
          {
            required: true,
            message: '请输入排序号',
            trigger: 'blur'
          }
        ]
      },
      showLocation: false,
      locationtitle: '',
      locationLoading: false,
      // storehouseList: [],
      // 货位form
      locationForm: {
        locationNo: '',
        storehouseId: '',
        sortNum: '',
        delFlag: '0'
      },
      // 分页
      currentPage: 1,
      totalNum: 1,
      totalNum1: 1, // 总条数
      pagesize: 10,
      pagesize1: 10,
      dicttype: '',
      // 批量删除
      id: [],
      ref: '',
      title: ''
    }
  },
  computed: {
    tableHeight() {
      return this.$store.state.tableHeight
    },
    itableHeight() {
      return this.$store.state.tableHeight + 50
    }
  },
  activated() {
    this.getYardData()
    this.getRegionData()
  },
  methods: {
    // 字典查询所属区域
    async getRegionData() {
      await publicapi.getDictData('REGION').then(res => {
        if (res.data.code == '0000') {
          this.regionList = res.data.data.REGION
        }
      })
    },
    regionChange(val) {
      if (val) {
        this.form.regionName = this.regionList.filter(item => item.dictValue == val)[0].dictLabel
      }
    },
    // 查询堆场
    async getYardData() {
      await publicapi.getYardData().then(res => {
        if (res.data.code == '0000') {
          this.yardDataList = res.data.data
          if(res.data.data.length>0){
            var data = res.data.data.map(item=>{
              return {
                dictValue: item.yardId,
                dictLabel: item.yardName
              }
            })
            this.yardDataListData = data
            this.selectObject[1].selectData = this.yardDataListData
          }
        }
      })

    },
    yardChange(val) {
      if (val) {
        this.form.yardName = this.yardDataList.filter(item => item.yardId == val)[0].yardName
      }
    },
    handleClose(done) {
      if (this.addleixingMod) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
            this.$nextTick(() => {
              if (this.$refs.formRefs !== undefined) {
                this.$refs.formRefs.resetFields()
              }
            })
          })
          .catch(_ => { })
      }
    },
    handleClose1(done) {
      done()
      this.ParamformList.locationNo = ''
    },
    handleClose2(done) {
      done()
    },
    // 新增列表弹出框
    async add() {
      this.loading = false
      if (!this.addleixingMod) {
        this.addleixingMod = true
      }
      this.title = '库场新增'
      this.form = this.$options.data().form;
    },
    // 修改列表弹出
    async handleEdit(index, row) {
      this.loading = false
      if (!this.addleixingMod) {
        this.addleixingMod = true
      }
      this.title = '库场修改'
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/StorehouseLocation/queryId?id=${row.id}`
      )
      if (res.data.success) {
        this.form = res.data.data
      }
    },
    // 保存新增/修改库场信息
    addList() {
      if (this.title == '库场新增') {
        this.$refs['formRefs'].validate(async valid => {
          if (valid) {
            const res = await this.$http.post(
              `/${this.$ServiceName}/api/external/StorehouseLocation/insert`,
              this.form
            )
            if (res.status === 200) {
              if (res.data.success) {
                if (this.addleixingMod) {
                  this.addleixingMod = false
                }
                this.getData()
                return this.$message.success(res.data.msg)
              }
              return this.$message.warning(res.data.msg)
            }
            this.$message.error('新增失败！')
          } else {
            return false
          }
        })
      } else {
        // 修改
        this.$refs['formRefs'].validate(async valid => {
          if (valid) {
            const res = await this.$http.put(
              `/${this.$ServiceName}/api/external/StorehouseLocation/update`,
              this.form
            )
            if (res.status === 200) {
              if (res.data.success) {
                if (this.addleixingMod) {
                  this.addleixingMod = false
                }
                this.getData()
                return this.$message.success(res.data.msg)
              }
              return this.$message.warning(res.data.msg)
            }
            this.$message.error('获取数据失败！')
          } else {
            return
          }
        })
      }
    },
    // 删除库场信息
    async subDelete(id) {
      const res = await this.$http.delete(
        `/${this.$ServiceName}/api/external/StorehouseLocation/deletebyid?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.$message.success(res.data.msg)
      this.getData()
    },
    // 删除货位信息
    async subDelete1(id) {
      const res = await this.$http.delete(
        `/${this.$ServiceName}/api/external/StorehouseLocation/deleteByIdhuo?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.$message.success(res.data.msg)
      this.getStorehouseLocation()
    },
    // 删除提示
    async handleDelete(flag, id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => { })
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      if (flag == '1') {
        this.subDelete(id)
      }
      if (flag == '2') {
        this.subDelete1(id)
      }
    },

    // 查询数据
    async getData() {
      this.loading = true
      if (this.pagesize === 0) {
        this.startpage = 1
      }
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/StorehouseLocation/queryall?startpage=${this.startpage}&pagesize=${this.pagesize}&storehouseName=${this.paramform.storehouseName}&yardId=${this.paramform.yardId}`
      )

      if (res.status == 200) {
        this.loading = false
        if (res.data.success) {
          this.storeHouseTableData = res.data.data.pages

          // 分页
          this.startpage = res.data.data.pageNum // 当前页
          this.totalNum = parseInt(res.data.data.totalNum) // 总数量
          this.pagesize = res.data.data.pageSize //
        }
      } else {
        this.$message.error('获取数据失败！')
      }
    },
    clickSearchSon() {
      this.startpage1 = 1
      this.getListData()
    },
    // 获取货位信息
    async getStorehouseLocation() {
      this.loading = true
      if (this.pagesize === 0) {
        this.startpage = 1
      }
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/StorehouseLocation/querybyid?startpage=${this.startpage1}&pagesize=${this.pagesize1}&id=${this.locationForm.storehouseId}&locationNo=${this.ParamformList.locationNo}`
      )
      if (res.status == 200) {
        this.loading = false
        if (res.data.success) {
          this.storehouseLocation = res.data.data.pages
          // 分页
          this.startpage1 = res.data.data.pageNum // 当前页
          this.totalNum1 = parseInt(res.data.data.totalNum) // 总数量
          this.pagesize1 = res.data.data.pageSize //
        }
      } else {
        this.$message.error('获取数据失败！')
      }
    },
    // 列表按钮
    handleList(index, row) {
      if (!this.exlc) {
        this.exlc = true
      }
      this.locationForm.storehouseId = row.id
      this.startpage1 = 1
      this.getStorehouseLocation()
    },
    // 修改库场下拉框
    // selecstorehouseName(val) {
    //   if (val) {
    //     this.locationForm.storehouseName = this.storehouseList.filter(item => item.id == val)[0].storehouseName
    //   }
    // },
    // 保存货位
    postList() {
      if (this.locationtitle == '货位新增') {
        this.$refs['addHuo'].validate(async valid => {
          if (valid) {
            const res = await this.$http.post(
              `/${this.$ServiceName}/api/external/StorehouseLocation/inserthuo`,
              this.locationForm
            )
            if (res.status === 200) {
              if (res.data.success) {
                if (this.showLocation) {
                  this.showLocation = false
                }
                this.getStorehouseLocation()
                return this.$message.success(res.data.msg)
              }
              return this.$message.warning(res.data.msg)
            }
            this.$message.error('新增失败！')
          } else {
            return false
          }
        })
      } else {
        this.$refs['addHuo'].validate(async valid => {
          if (valid) {
            this.nowData.sortNum = this.locationForm.sortNum
            this.nowData.locationNo = this.locationForm.locationNo
            const res = await this.$http.put(
              `/${this.$ServiceName}/api/external/StorehouseLocation/updatehuo`,
              this.nowData
            )
            if (res.status === 200) {
              if (res.data.success) {
                if (this.showLocation) {
                  this.showLocation = false
                }
                this.getStorehouseLocation()
                return this.$message.success(res.data.msg)
              }
              return this.$message.warning(res.data.msg)
            }
            this.$message.error('新增失败！')
          } else {
            return false
          }
        })
      }
    },
    // 货位新增弹出框
    locationAddModel() {
      this.showLocation = true
      this.locationtitle = '货位新增'
      this.locationForm.sortNum = ''
      this.locationForm.locationNo = ''
    },
    // 货位修改弹出框
    async locationUpdateModel(index, row) {
      this.loading = false
      if (!this.showLocation) {
        this.showLocation = true
      }
      this.locationtitle = '货位修改'
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/StorehouseLocation//querybyidhuo?id=${row.id}`
      )
      if (res.data.success) {
        this.nowData = res.data.data
        this.locationForm.sortNum = this.nowData.sortNum
        this.locationForm.locationNo = this.nowData.locationNo
      }
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.pagesize = val
      this.getData()
    },
    // 当前页
    handleCurrentChange(val) {
      this.startpage = val
      this.getData()
    },
    // 每页显示的条数
    handleSizeCha(val) {
      this.pagesize1 = val
      this.getStorehouseLocation()
    },
    // 当前页
    handleCurrentCha(val) {
      this.startpage1 = val
      this.getListData()
    },
    // 清除当前页
    clearCurrentPage() {
      this.startpage = 1
    },
    // 搜索货位
    searchClickHw() {
      this.startpage1 = 1
      this.getStorehouseLocation()
    },
    searchData() {
      this.startpage = 1
      this.getData()
    },
    searchClickStorehouse(searchData) {
      this.startpage = 1
      this.paramform = Object.assign(this.paramform, searchData);
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-table {
  max-height: none !important;
}

.selectBox {
  justify-content: space-between;
  display: flex;

  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-left: none;

  height: 50px;
  padding-top: 11px;
  padding-left: 14px;
  padding-right: 20px;
}

/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}

.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  padding: 0 1rem;
}

.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}

.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;

  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}

/deep/ .el-table .cell {
  white-space: nowrap;
}

/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}

/deep/ .el-pagination {
  text-align: right;
  padding: 10px 5px;
}

/deep/ .el-table th>.cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
  background-color: #fff;
  border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}

/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
  border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}

.right /deep/ .el-button--mini {
  padding: 7px 6px;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}

/deep/ .el-button+.el-button {
  margin-left: 3px;
}

.asa {
  display: inline;

  /deep/ .el-button--mini,
  .el-button--mini.is-round {
    padding: 7px 6px;
  }
}

.selectBox1 {
  justify-content: space-between;
  display: flex;
  flex-direction: row-reverse;
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-left: none;
  line-height: 28px;
  height: 37px;
  padding-top: 11px;
  padding-left: 14px;
  padding-right: 20px;
}

.excelBox /deep/ .el-drawer__open .el-drawer.rtl {
  width: 50% !important;
}

/deep/ .el-form-item--mini.el-form-item {
  line-height: 28px;
}

/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
}
</style>
